import React, { useRef, useEffect, useState } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro, { getCurrentInstance, useDidShow } from '@tarojs/taro'
import { useSelector, useDispatch } from 'react-redux'
import { useImmer } from 'use-immer'
import { SpGoodsItem, SpPage, SpScrollView } from '@/components'
import { fetchUserFavs } from '@/store/slices/user'
import doc from '@/doc'
import api from '@/api'
import { pickBy } from '@/utils'
import S from '@/spx'

import './goods-list.scss'

const initialState = {
  leftList: [],
  rightList: [],
  brandList: [],
  brandSelect: [],
  routerParams: null,
  card_id: null // 兑换券
}

function ItemList(props) {
  const { goodsSort = '', isNav = true, type } = props
  const [state, setState] = useImmer(initialState)
  const { leftList, rightList } = state
  const dispatch = useDispatch()

  const goodsRef = useRef()
  useEffect(() => {
    // if (S.getAuthToken()) {
    //   dispatch(fetchUserFavs())
    // }
    goodsRef.current.reset()
  }, [])

  const fetch = async ({ pageIndex, pageSize }) => {
    let params = {
      page: pageIndex,
      pageSize,
      approve_status: 'onsale,only_show',
      item_type: 'normal',
      is_point: 'false',
      goodsSort
    }
    const { list, total_count, brand_list } =
      type === 'home' ? await api.item.getitems(params) : await api.item.search(params)
    const n_list = pickBy(
      list,
      type === 'home' ? doc.goods.HOME_LIST_GOODS : doc.goods.ITEM_LIST_GOODS
    )
    const resLeftList = n_list.filter((item, index) => {
      if (index % 2 == 0) {
        return item
      }
    })
    const resRightList = n_list.filter((item, index) => {
      if (index % 2 == 1) {
        return item
      }
    })

    setState((v) => {
      v.leftList[pageIndex - 1] = resLeftList
      v.rightList[pageIndex - 1] = resRightList
      v.brandList = pickBy(brand_list?.list, doc.goods.WGT_GOODS_BRAND)
    })

    return { total: total_count }
  }
  const handleClickStore = (item) => {
    const url = `/subpages/store/index?id=${item.distributor_id}`
    Taro.navigateTo({
      url
    })
  }

  return (
    <SpPage scrollToTopBtn className='page-item-list-category' isNav={isNav}>
      <SpScrollView className='item-list-scroll' auto={false} ref={goodsRef} fetch={fetch}>
        <View className='goods-list'>
          <View className='left-container'>
            {leftList.map((list, idx) => {
              return list.map((item, sidx) => (
                <View className='goods-item-wrap' key={`goods-item-l__${idx}_${sidx}`}>
                  <SpGoodsItem
                    showFav
                    onStoreClick={handleClickStore}
                    info={{
                      ...item
                    }}
                  />
                </View>
              ))
            })}
          </View>
          <View className='right-container'>
            {rightList.map((list, idx) => {
              return list.map((item, sidx) => (
                <View className='goods-item-wrap' key={`goods-item-r__${idx}_${sidx}`}>
                  <SpGoodsItem
                    showFav
                    onStoreClick={handleClickStore}
                    info={{
                      ...item
                    }}
                  />
                </View>
              ))
            })}
          </View>
        </View>
      </SpScrollView>
    </SpPage>
  )
}

export default ItemList
